<template>
  <div class="distribution-area">
    <div class="content">
      <div class="left">
        <a-form
          :model="formState"
          ref="formDataRef"
          name="basic"
          :label-col="{ style: 'width:70px' }"
          :wrapper-col="{ style: 'calc(100% - 70px)' }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item label="省市区" name="areaIds" :rules="[{ required: true, message: '请选择省市区!' }]">
            <a-cascader
              v-model:value="formState.areaIds"
              :fieldNames="{ label: 'name', value: 'code', children: 'child' }"
              :options="areaOpts"
              showSearch
              @change="changeAreaHandle"
              placeholder="请选择"
            />
          </a-form-item>
          <a-form-item label="街道" name="streetCode" :rules="[{ required: true, message: '请选择街道!' }]">
            <a-select
              v-model:value="formState.streetCode"
              showSearch
              placeholder="请选择街道"
              mode="multiple"
              :options="streetOpts.map((t:any)=>({label:t.name,value:t.code}))"
              :filter-option="filterOption"
              allowClear
              :max-tag-count="2"
            >
              <!-- <a-select-option v-for="(item, index) in streetOpts" :key="index" :value="item.code">{{ item.name }}</a-select-option> -->
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
            <a-button type="primary" html-type="submit">添加</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="right">
        <div class="item" v-for="(item, index) in submitForm" :key="index">
          <span :title="`${item.provinceName}/${item.cityName}/${item.areaName}/${item.streetName}`">{{ item.provinceName }}/{{ item.cityName }}/{{ item.areaName }}/{{ item.streetName }}</span>
          <close-circle-outlined style="color: red; cursor: pointer" @click="deleteHandle(index)" />
        </div>
      </div>
    </div>
    <div class="submit-btn-wrappe">
      <a-button type="primary" @click="keepHandle">保 存</a-button>
      <a-button @click="resetHandle">取 消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { cloneDeep } from "lodash";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: DriverManagement.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData } = toRefs(props);
const { formDataRef, formState, areaOpts, getAreaOpts, streetOpts } = InitHook();
const { onFinish, onFinishFailed, resetFields, resetHandle, changeAreaHandle, submitForm, selectAreaObj, deleteHandle, keepHandle, filterOption } = OperationHook({
  formDataRef,
  formState,
  areaOpts,
  emit,
  streetOpts,
  passData
});
const init = () => {
  submitForm.value = cloneDeep(passData.value.bizDriverAreaInfoResDtoList) || [];
  selectAreaObj.value = {};
  getAreaOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.distribution-area{
.content{
    display: flex;
    width: 100%;
    .left{
        flex: 1;
    }
    .right{
        width: 360px;
        height: 360px;
        overflow-y: auto;
        border: 1px solid #ccc;
        margin-left: 16px;
        border-radius: 5px;
        padding: 12px;
        .item{
            padding-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
        }
    }
}
.submit-btn-wrappe{
    padding-top: 24px;
    text-align: center;
    :deep(.ant-btn){
        margin-right: 16px;
    }
}
}
</style>
